<template>
  <div class="app-container">
   <el-row :gutter="30">
      <el-col :span="24">
        <div style="margin-top:10px">
          <el-button icon="el-icon-close" type="danger" size="mini" v-if="del" @click="deleteAny">删除</el-button>
        </div>
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="申诉人" label-width="100px">
              <el-input v-model="tableSearchParam.name" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="申诉人手机" label-width="100px">
              <el-input v-model="tableSearchParam.mobile" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="被控人" label-width="100px">
              <el-input v-model="tableSearchParam.clientName" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="被控人手机" label-width="100px">
              <el-input v-model="tableSearchParam.clientPhone" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="仲裁编号" label-width="100px">
              <el-input v-model="tableSearchParam.orderId" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="运输单号" label-width="100px">
              <el-input v-model="tableSearchParam.transportConfirmFormId" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="接货日期" label-width="100px">
              <el-date-picker
                v-model="tableSearchParam.packageDateFrom"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择">
              </el-date-picker>
              <span style="margin: 5px;">至</span>
              <el-date-picker
                v-model="tableSearchParam.packageDateTo"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="处理进度" label-width="100px">
              <el-select v-model="tableSearchParam.status" clearable style="width: 200px">
                <el-option value="" key="1" label="全部"></el-option>
                <el-option value="2" key="2" label="仲裁中"></el-option>
                <el-option value="3" key="3" label="已仲裁"></el-option>
                <el-option value="4" key="4" label="已调节"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="35">
          </el-table-column>
          <el-table-column
            label="仲裁编号"
            property="orderId"
            width="160">
          </el-table-column>
          <el-table-column
            label="运输单号"
            property="transportConfirmFormId"
            width="170">
          </el-table-column>
          <el-table-column
            label="申诉人"
            property="name"
            width="120">
          </el-table-column>
          <el-table-column
            label="申诉人手机"
            property="mobile"
            width="120">
          </el-table-column>
          <el-table-column
            label="被控人"
            property="clientName"
            width="120">
          </el-table-column>
          <el-table-column
            label="被控人手机"
            property="clientPhone"
            width="120">
          </el-table-column>
          <el-table-column
            label="纠纷金额"
            property="amount"
            width="100">
          </el-table-column>
          <el-table-column
            label="纠纷描述"
            property="description"
            width="300">
          </el-table-column>
          <el-table-column
            label="处理进度"
            property="statusLabel"
            width="100">
          </el-table-column>
          <el-table-column
            label="提交日期"
            property="createdTime"
            width="150">
          </el-table-column>
          <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  type="success"
                  v-if = "load"
                  @click="viewData(scope.$index, scope.row)">查看
                </el-button>
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  type="danger"
                  v-if = "del"
                  @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  @click="changeState(scope.$index, scope.row,2)" v-if="handlePermission&&scope.row.status ==1 ">处理
                </el-button>
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  @click="openCloseCaseDialog(scope.$index, scope.row)" v-if="changeStatePermission&&scope.row.status==2">结案
                </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="仲裁结果" :visible.sync="dialogCloseCaseFormVisible" top="10vh">
      <el-form :model="formData" style="width:400px">
          <el-radio-group v-model="formData.status">
              <el-radio :label="3">已解决</el-radio>
              <el-radio :label="4">已调解</el-radio>
          </el-radio-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeCaseDialog">取 消</el-button>
        <el-button type="primary" @click="handleCloseCase" >保存</el-button>
      </div>
    </el-dialog>
   <el-dialog title="仲裁申请详情" :visible.sync="dialogFormVisible" top="2vh" width="70%">
      <div style="height:500px;overflow-y: auto">
        <el-row>
          <el-col :span="4" class="m-col">仲裁编号</el-col>
          <el-col :span="8" class="m-col-left">{{arbitration.arbitrationOrderId}}</el-col>
          <el-col :span="4" class="m-col-left">运输单号</el-col>
          <el-col :span="8" class="m-col-left">{{arbitration.transportOrderId}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">申诉人</el-col>
          <el-col :span="8" class="m-col-left">{{arbitration.name}}</el-col>
          <el-col :span="4" class="m-col-left">申诉人手机</el-col>
          <el-col :span="8" class="m-col-left">{{arbitration.mobile}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">被控人姓名</el-col>
          <el-col :span="8" class="m-col-left">{{arbitration.clientName}}</el-col>
          <el-col :span="4" class="m-col-left">被控人手机</el-col>
          <el-col :span="8" class="m-col-left">{{arbitration.clientPhone}}</el-col>
        </el-row>

        <el-row>
          <el-col :span="4" class="m-col">被控人联系地址</el-col>
          <el-col :span="8" class="m-col-left">{{arbitration.addr}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">纠纷金额</el-col>
          <el-col :span="8" class="m-col-left">{{arbitration.amount}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">事故描述</el-col>
          <el-col :span="8" class="m-col-left">
          {{arbitration.description}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">提交时间</el-col>
          <el-col :span="8" class="m-col-left">{{arbitration.createdTime}}</el-col>
          <el-col :span="4" class="m-col-left">处理进度</el-col>
          <el-col :span="8" class="m-col-left">{{arbitration.statusLabel}}</el-col>
        </el-row>

        <el-row>
          <el-col :span="4" class="m-col-bottom">证据照片</el-col>
          <el-col :span="20" class="m-col-bottom-left">
            <div v-for="item in  arbitration.evidencePhotos">
              <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
                   @click="showImg(item.url)">
                <img :src="item.baseUrl+item.url"
                     style="width:100%;height:100%;"></img>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
      <div class="viewImg" :style="{transform:'rotate('+roteVal+'deg)'}" @click="roteImg">
        <img :src="baseUrl+imgUrlaa" style="width:80%;height: auto">
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>


  </div>
</template>

<style scoped>

  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

</style>

<script>
  import insuranceInfoApi from '@/api/insuranceInfoApi'
  import insuranceClassifyApi from '@/api/insuranceClassifyApi'
  import industryApi from '@/api/industryApi'
  import arbitrationApi from '@/api/arbitrationApi'

  export default {
    created() {
      this.list = this.permissionValid.validAction(this.permissionValid.permissionRule.arbitration.list)
      this.del = this.permissionValid.validAction(this.permissionValid.permissionRule.arbitration.del)
      this.load = this.permissionValid.validAction(this.permissionValid.permissionRule.arbitration.load)
      this.handlePermission = this.permissionValid.validAction(this.permissionValid.permissionRule.arbitration.handle)

      this.changeStatePermission = this.permissionValid.validAction(this.permissionValid.permissionRule.arbitration.changeState)
      this.listTableData()
    },
    data() {
      return {
        list:false,
        del:false,
        load:false,
        handlePermission:false,
        changeStatePermission:false,
        formData: {
          'status':3
        },
        tableSearchParam: {
          name: '',
          mobile: '',
          clientName: '',
          clientPhone: '',
          orderId:'',
          transportConfirmFormId:'',
          packageDateFrom:'',
          packageDateTo:''
        },
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        handleId: '',
        dialogUploadConstraintFormVisible: false,
        formUploadConstraintData: {
          uploadConstraintArr: []
        },
        uploadConstraintArr: [],
        dialogStrategyAFormVisible: false,
        dialogStrategyBFormVisible: false,
        multipleSelection: [],
        dialogCloseCaseFormVisible: false,
        currentId:'',
        dialogFormVisible: false,
        arbitration:{},
        dialogImgFormVisible:false,
        roteVal: 0,
        imgUrlaa: '',
        baseUrl: process.env.IMG_BASE_URL,
      }
    },
    methods: {
      roteImg() {
        this.roteVal += 90
      },
      changeState(index, row, status) {
        let params = {}
        let ids = []
        ids.push(row.id)
        params.ids= ids;
        params.status = status
        arbitrationApi.changeState(params, (res) => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.listTableData()
        }, () => {
        })
      },
      openCloseCaseDialog(index, row){
          this.dialogCloseCaseFormVisible = true
          this.currentId = row.id
      },
      closeCaseDialog(){
        this.dialogCloseCaseFormVisible = false
        this.currentId = ''
      },
      handleCloseCase() {
          let params = this.formData
          let ids = []
          ids.push(this.currentId)
          params.ids= ids;
          arbitrationApi.changeState(params, (res) => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.dialogCloseCaseFormVisible = false
            this.listTableData()
          }, () => {
          })
      },
      handleDelete(index, row) {
         this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          arbitrationApi.remove(row.id, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      listTableData() {
        arbitrationApi.list(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
        }, () => {
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      addData() {
        var t = new Date().getTime();
        this.$router.push({path: '/insurance/product/info/add', query: {t: t}})
      },
      viewData(index, row) {
        arbitrationApi.load(row.id, (res) => {
          this.arbitration = res
          this.dialogFormVisible = true
        }, () => {
        })
      },
     showImg(url) {
        this.roteVal = 0
        this.dialogImgFormVisible = true
        this.imgUrlaa = url
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          insuranceInfoApi.remove(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.listTableData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },


    }
  }
</script>
